<!--
 * @Author: your name
 * @Date: 2020-05-20 10:15:53
 * @LastEditTime: 2020-07-09 09:11:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-cli4-multi/src/modules/front/pages/GattTable/components/GattLeft/components/GatttableTd.vue
 -->
<template>
  <div>
    <div
      ref="cells"
      class="cell"
      :data-level="tdData.level"
      :style="{width:th.width ? th.width + 'px' : '80px',textIndent:th.shrink ? tdData.children && tdData.children.length ? (tdData.level - 1) * 10 + 'px' : ((tdData.level - 1) * 10 - 15) + 'px' : null,fontWeight:(tdData.level === 1 && th.shrink && tdData.children && tdData.children.length && !th.weight) ? 'bold' :'normal'}"
      >
      <span
        style="width: 15px;display: inline-block;text-indent: 0" v-if="th.shrink">
        <span
          v-show="tdData.children && tdData.children.length"
          v-debounce.click.stop="{fun: 'opens', args: {id: tdData.id}}"
          style="cursor: pointer;"
        >
          <i :class="{'el-icon-remove-outline': tdData.open, 'el-icon-circle-plus-outline': !tdData.open}"></i>
        </span>
      </span>
      <span class="cell-value">{{tdData.params[keyValue]}}</span>
    </div>
  </div>
</template>
<script>
/* eslint-disable camelcase */
export default {
  data () {
    return {
      edit: false
    }
  },
  props: {
    tdData: Object,
    th: Object,
    index: Number,
    keyValue: String
  },
  mounted () {
    // console.log(this.tdData)
    // debugger
  },
  methods: {
    // 展开收缩任务
    opens () {
      this.changeOpen(arguments[1].id, this.$parent.allData)
      this.$emit('change', { data: this.$parent.allData })
    },
    changeOpen (id, data) {
      for (var i of data) {
        if (i.id === id) {
          i.open = !i.open
          return
        }
        if (i.children) {
          this.changeOpen(id, i.children)
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .cell
    position relative
    word-wrap normal
    overflow hidden
    text-overflow ellipsis
    vertical-align middle
    width 100%
    box-sizing border-box
    padding 0 10px
    min-height 16px
  .gante_edit_input_liu{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height:100%;
    box-sizing: border-box;
    border: 1px solid #00b0ff;
    padding: 0 5px;
    font-size: 14px;
    z-index:1000;
  }
  .cell-value{
    cursor: default;
    text-indent: 0;
  }
</style>
